<template>
  <t-space direction="vertical" size="large">
    <t-space direction="vertical" size="small">
      <p>插件调用</p>
      <t-space>
        <t-button theme="primary" variant="outline" @click="$message.info('用户表示普通操作信息提示')">消息</t-button>
        <t-button
          theme="success"
          variant="outline"
          @click="$message.success({ content: '用户表示操作顺利达成', duration: 2000 })"
        >
          成功
        </t-button>
        <t-button theme="warning" variant="outline" @click="$message('warning', '用户表示操作引起一定后果')">
          警示
        </t-button>
        <t-button
          theme="danger"
          variant="outline"
          @click="$message('error', { content: '用户表示操作引起严重的后果', duration: 4000 })"
        >
          失败
        </t-button>
        <t-button theme="primary" variant="outline" @click="$message.question('用于帮助用户操作的信息提示', 5000)">
          询问
        </t-button>
        <!-- 0 表示永远不自动消失 -->
        <t-button theme="primary" variant="outline" @click="$message.loading('用于表示操作正在生效的过程中', 0)">
          加载中
        </t-button>
        <t-button theme="default" variant="outline" @click="$message.closeAll()">关闭所有</t-button>
      </t-space>
    </t-space>

    <t-space direction="vertical" size="small">
      <p>函数式调用</p>
      <t-space>
        <t-button theme="primary" variant="outline" @click="MessagePlugin.info('用户表示普通操作信息提示')">
          消息
        </t-button>
        <t-button theme="success" variant="outline" @click="MessagePlugin.success('用户表示操作顺利达成')">
          成功
        </t-button>
        <t-button
          theme="warning"
          variant="outline"
          @click="MessagePlugin.warning({ content: '用户表示操作引起一定后果' })"
        >
          警示
        </t-button>
        <t-button theme="danger" variant="outline" @click="MessagePlugin.error({ content: content })">失败</t-button>
        <t-button theme="primary" variant="outline" @click="MessagePlugin.question('用于帮助用户操作的信息提示')">
          询问
        </t-button>
        <t-button theme="primary" variant="outline" @click="MessagePlugin.loading('用于表示操作正在生效的过程中')">
          加载中
        </t-button>
        <t-button theme="default" variant="outline" @click="MessagePlugin.closeAll()">关闭所有</t-button>
      </t-space>
    </t-space>
  </t-space>
</template>

<script lang="tsx" setup>
import { MessagePlugin } from 'tdesign-vue-next';
const content = () => {
  return (
    <div>
      操作有误，<a href="#">前往查看</a>
    </div>
  );
};
</script>
